<body></body>
<script>
  // 用一个全局变量存储被注册的副作用函数
  let activeEffect
  const bucket = new Set()
  function effect(fn) {
    activeEffect = fn
    fn()
  }

  const data = { text: 'hello world' }
  const obj = new Proxy(data, {
    get(target, key) {
      if (activeEffect) {
        //把副作用函数存到桶里
        bucket.add(activeEffect)
      }
      return target[key]
    },
    set(target, key, newVal) {
      target[key] = newVal
      bucket.forEach((fn) => fn())
      return true
    },
  })

  // 读取obj不是读取data，，
  effect(() => {
    console.log('effect is run') //打印两次
    document.body.innerText = obj.text
  })
  setTimeout(() => {
    // 副作用函数中并没有读取 notExist 属性的值
    obj.notExist = 'hello vue3'
  }, 1000)

  // 问题：只有一个桶没有，数据和副作用对应关系，
  // 多个代理如果还是 bucket.forEach((fn) => fn())
  // 那么这样出现了，不论那个代理数据读写都会遍历整个桶 bucket
</script>
